{% extends 'migration_app/dashboard_base.html' %}

{% block title %}创建迁移任务 - Oracle到PolarDB-PG迁移平台{% endblock %}

{% block page_title %}创建迁移任务{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'migration_app:task_list' %}">迁移任务</a></li>
<li class="breadcrumb-item active" aria-current="page">创建任务</li>
{% endblock %}

{% block dashboard_content %}
<div class="card">
    <div class="card-header">
        <i class="fas fa-plus-circle me-1"></i> 创建新的迁移任务
    </div>
    <div class="card-body">
        <form id="create-task-form">
            {% csrf_token %}
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="task-name" class="form-label">任务名称</label>
                        <input type="text" class="form-control" id="task-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="task-type" class="form-label">任务类型</label>
                        <select class="form-select" id="task-type" name="task_type" required>
                            <option value="">请选择任务类型</option>
                            <option value="table">表</option>
                            <option value="materialized_view">物化视图</option>
                            <option value="view">视图</option>
                            <option value="routine">例程</option>
                            <option value="all_tables">所有表</option>
                            <option value="view_to_table">视图数据迁移到表</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="oracle-connection" class="form-label">Oracle数据库连接</label>
                        <select class="form-select" id="oracle-connection" name="oracle_connection" required>
                            <option value="">请选择Oracle连接</option>
                            {% for conn in oracle_connections %}
                            <option value="{{ conn.id }}">{{ conn.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="postgres-connection" class="form-label">PolarDB-PG数据库连接</label>
                        <select class="form-select" id="postgres-connection" name="postgres_connection" required>
                            <option value="">请选择PolarDB-PG连接</option>
                            {% for conn in postgres_connections %}
                            <option value="{{ conn.id }}">{{ conn.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="source-schema" class="form-label">源Schema</label>
                        <div class="input-group">
                            <select class="form-select" id="source-schema" name="source_schema" required>
                                <option value="">请先选择Oracle连接</option>
                            </select>
                            <button type="button" class="btn btn-outline-primary" id="get-source-schema-btn">
                                <i class="fas fa-sync-alt me-1"></i> 刷新
                            </button>
                        </div>
                        <div id="source-schema-loading" class="text-primary d-none">
                            <div class="spinner-border spinner-border-sm me-1" role="status"></div>
                            <span>加载中...</span>
                        </div>
                        <div class="form-text">
                            选择Oracle连接后会自动加载Schema列表。
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="source-object" class="form-label">源对象</label>
                        <div class="input-group mb-2">
                            <input type="text" class="form-control" id="source-object-search" placeholder="输入关键词搜索...">
                            <button class="btn btn-outline-secondary" type="button" id="source-object-search-btn">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                        </div>
                        <div class="input-group">
                            <div class="form-control p-0" id="source-object-container" style="height: 400px; overflow-y: auto;">
                                <div class="list-group list-group-flush" id="source-object-list">
                                    <div class="list-group-item text-muted">请先选择源Schema</div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-primary" id="get-source-object-btn">
                                <i class="fas fa-sync-alt me-1"></i> 刷新
                            </button>
                        </div>
                        <div id="source-object-loading" class="text-primary d-none">
                            <div class="spinner-border spinner-border-sm me-1" role="status"></div>
                            <span>加载中...</span>
                        </div>
                        <div id="load-more-container" class="text-center mt-2 d-none">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="load-more-btn">
                                <i class="fas fa-chevron-down me-1"></i> 加载更多
                            </button>
                            <span id="load-status" class="d-block text-muted mt-1 small"></span>
                        </div>
                        <div id="selected-objects" class="mt-2">
                            <div class="fw-bold">已选择的对象：</div>
                            <div id="selected-objects-list" class="mt-1"></div>
                        </div>
                        <div class="form-text">
                            选择Schema后会自动加载对象列表。<br>
                            对于"所有表"类型的任务，无需选择源对象。<br>
                            按住Ctrl键可多选对象。
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="target-schema" class="form-label">目标Schema</label>
                        <div class="mb-2">
                            <select class="form-select" id="postgres-database" name="postgres_database">
                                <option value="">请先选择PolarDB-PG连接</option>
                            </select>
                            <div class="form-text">
                                先选择PostgreSQL数据库
                            </div>
                        </div>
                        <div class="input-group">
                            <select class="form-select" id="target-schema" name="target_schema" required>
                                <option value="">请先选择数据库</option>
                            </select>
                            <button type="button" class="btn btn-outline-primary" id="get-target-schema-btn">
                                <i class="fas fa-sync-alt me-1"></i> 刷新
                            </button>
                        </div>
                        <div id="target-schema-loading" class="text-primary d-none">
                            <div class="spinner-border spinner-border-sm me-1" role="status"></div>
                            <span>加载中...</span>
                        </div>
                        <div class="form-text">
                            选择数据库后会自动加载Schema列表。<br>
                            通常选择"public"模式作为目标Schema。
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="conflict-strategy" class="form-label">目标对象冲突处理策略</label>
                        <select class="form-select" id="conflict-strategy" name="conflict_strategy">
                            <option value="error">遇到冲突时报错</option>
                            <option value="replace">删除并替换已存在对象</option>
                            <option value="skip">跳过已存在对象</option>
                            <option value="append">追加数据（仅适用于表）</option>
                            <option value="truncate">清空表并重新加载数据</option>
                        </select>
                        <div class="form-text">
                            当目标Schema中已存在同名对象时的处理方式。
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-save me-1"></i> 创建任务
                </button>
                <a href="{% url 'migration_app:task_list' %}" class="btn btn-outline-secondary btn-lg ms-2">
                    <i class="fas fa-times me-1"></i> 取消
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts_1 %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取表单元素
        const form = document.getElementById('create-task-form');
        const taskTypeSelect = document.getElementById('task-type');
        const oracleConnectionSelect = document.getElementById('oracle-connection');
        const sourceSchemaSelect = document.getElementById('source-schema');
        const sourceObjectList = document.getElementById('source-object-list');
        const sourceObjectSearch = document.getElementById('source-object-search');
        const sourceObjectSearchBtn = document.getElementById('source-object-search-btn');
        const selectedObjectsList = document.getElementById('selected-objects-list');
        const loadMoreContainer = document.getElementById('load-more-container');
        const loadMoreBtn = document.getElementById('load-more-btn');
        const loadStatus = document.getElementById('load-status');
        const postgresConnectionSelect = document.getElementById('postgres-connection');
        const postgresDatabaseSelect = document.getElementById('postgres-database');
        const targetSchemaSelect = document.getElementById('target-schema');
        const csrfToken = document.querySelector('input[name="csrfmiddlewaretoken"]') ? 
                          document.querySelector('input[name="csrfmiddlewaretoken"]').value : '';
        
        // 获取按钮和加载指示器
        const getSourceSchemaBtn = document.getElementById('get-source-schema-btn');
        const getSourceObjectBtn = document.getElementById('get-source-object-btn');
        const getTargetSchemaBtn = document.getElementById('get-target-schema-btn');
        const sourceSchemaLoading = document.getElementById('source-schema-loading');
        const sourceObjectLoading = document.getElementById('source-object-loading');
        const targetSchemaLoading = document.getElementById('target-schema-loading');
        
        // 分页加载相关变量
        let currentOffset = 0;
        let hasMoreObjects = false;
        let totalObjectCount = 0;
        let loadedObjectCount = 0;
        
        // 辅助函数 - 显示/隐藏加载指示器
        function showLoading(element) {
            if (element) element.classList.remove('d-none');
        }
        
        function hideLoading(element) {
            if (element) element.classList.add('d-none');
        }
        
        // 异步请求函数
        async function fetchData(url, requestData) {
            try {
                // 确保URL正确
                const fullUrl = url.startsWith('http') ? url : window.location.origin + url;
                
                // 使用原生fetch API
                const response = await fetch(fullUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify(requestData)
                });
                
                const responseText = await response.text();
                
                try {
                    const data = JSON.parse(responseText);
                    return data;
                } catch (error) {
                    throw new Error('解析JSON失败: ' + error.message);
                }
            } catch (error) {
                throw error;
            }
        }
        
        // 获取源Schema函数
        async function getSourceSchema() {
            if (!oracleConnectionSelect.value) {
                alert('请先选择Oracle连接');
                return;
            }
            
            // 显示加载状态
            showLoading(sourceSchemaLoading);
            sourceSchemaSelect.innerHTML = '<option value="">加载中...</option>';
            sourceSchemaSelect.disabled = true;
            
            try {
                const requestData = {
                    connection_id: oracleConnectionSelect.value,
                    type: 'oracle',
                    limit: 200  // 限制返回200条数据
                };
                
                // 禁用按钮避免重复点击
                getSourceSchemaBtn.disabled = true;
                
                const data = await fetchData('{% url "migration_app:get_schemas" %}', requestData);
                
                if (data.status === 'success') {
                    sourceSchemaSelect.innerHTML = '<option value="">请选择Schema</option>';
                    
                    // 按字母顺序排序
                    if (data.schemas && data.schemas.length > 0) {
                        const sortedSchemas = [...data.schemas].sort((a, b) => a.localeCompare(b));
                        sortedSchemas.forEach(schema => {
                            sourceSchemaSelect.innerHTML += `<option value="${schema}">${schema}</option>`;
                        });
                    }
                    
                    sourceSchemaSelect.disabled = false;
                    
                    // 显示数据加载提示
                    if (data.has_more) {
                        const optionElement = document.createElement('option');
                        optionElement.disabled = true;
                        optionElement.textContent = `加载了 ${data.count}/${data.total} 条记录`;
                        sourceSchemaSelect.appendChild(optionElement);
                    }
                } else {
                    throw new Error(data.message || '获取Schema列表失败');
                }
            } catch (error) {
                sourceSchemaSelect.innerHTML = '<option value="">加载失败，请重试</option>';
                sourceSchemaSelect.disabled = false;
                alert('获取源Schema失败：' + error.message);
            } finally {
                // 隐藏加载指示器
                hideLoading(sourceSchemaLoading);
                // 重新启用按钮
                getSourceSchemaBtn.disabled = false;
            }
        }
        
        // 当Oracle连接选择变化时，自动刷新源Schema列表
        oracleConnectionSelect.addEventListener('change', function() {
            // 清空源Schema选择和源对象选择
            sourceSchemaSelect.innerHTML = '<option value="">请选择Schema</option>';
            sourceObjectList.innerHTML = '<div class="list-group-item text-muted">请先选择源Schema</div>';
            
            // 如果选择了连接，自动获取Schema列表
            if (this.value) {
                getSourceSchema();
            }
        });
        
        // 当源Schema选择变化时，如果有任务类型，自动获取对象列表
        sourceSchemaSelect.addEventListener('change', function() {
            // 清空源对象选择
            sourceObjectList.innerHTML = '<div class="list-group-item text-muted">请先选择源对象</div>';
            
            // 如果选择了Schema且有任务类型，且任务类型不是全部表，自动获取对象列表
            if (this.value && taskTypeSelect.value && taskTypeSelect.value !== 'all_tables') {
                getSourceObject();
            }
        });
        
        // 当任务类型变化时，如果已选择了Schema，自动获取对象列表
        taskTypeSelect.addEventListener('change', function() {
            // 清空已选择的对象显示
            selectedObjectsList.innerHTML = '<span class="text-muted">未选择任何对象</span>';
            
            // 如果是全部表类型，清空并禁用源对象选择
            if (this.value === 'all_tables') {
                sourceObjectList.innerHTML = '<div class="list-group-item text-muted">对于"所有表"类型的任务，无需选择源对象</div>';
                loadMoreContainer.classList.add('d-none');
                return;
            }
            
            // 恢复源对象选择
            sourceObjectList.disabled = false;
            
            // 清空源对象选择
            sourceObjectList.innerHTML = '<div class="list-group-item text-muted">请先选择源对象</div>';
            
            // 如果选择了Schema且选择了任务类型，自动获取对象列表
            if (sourceSchemaSelect.value && this.value) {
                getSourceObject();
            }
        });
        
        // 获取目标Schema函数
        async function getTargetSchema() {
            if (!postgresConnectionSelect.value) {
                alert('请先选择PolarDB-PG连接');
                return;
            }
            
            if (!postgresDatabaseSelect.value) {
                alert('请先选择PostgreSQL数据库');
                return;
            }
            
            // 显示加载状态
            showLoading(targetSchemaLoading);
            targetSchemaSelect.innerHTML = '<option value="">加载中...</option>';
            targetSchemaSelect.disabled = true;
            
            try {
                const requestData = {
                    connection_id: postgresConnectionSelect.value,
                    type: 'postgres',
                    database: postgresDatabaseSelect.value,
                    limit: 200  // 限制返回200条数据
                };
                
                // 禁用按钮避免重复点击
                getTargetSchemaBtn.disabled = true;
                
                const data = await fetchData('{% url "migration_app:get_schemas" %}', requestData);
                
                if (data.status === 'success') {
                    targetSchemaSelect.innerHTML = '<option value="">请选择Schema</option>';
                    
                    // 如果有结果，按分类排序显示
                    if (data.schemas && data.schemas.length > 0) {
                        // 首先显示public模式
                        if (data.schemas.includes('public')) {
                            targetSchemaSelect.innerHTML += `<option value="public">public</option>`;
                        }
                        
                        // 添加其他用户模式（不包括pg_开头的系统模式）
                        const userSchemas = data.schemas.filter(schema => 
                            schema !== 'public' && 
                            !schema.startsWith('pg_') && 
                            schema !== 'information_schema'
                        );
                        
                        if (userSchemas.length > 0) {
                            // 添加用户模式分隔符
                            const userOptgroup = document.createElement('optgroup');
                            userOptgroup.label = '用户模式';
                            
                            userSchemas.forEach(schema => {
                                const option = document.createElement('option');
                                option.value = schema;
                                option.textContent = schema;
                                userOptgroup.appendChild(option);
                            });
                            
                            targetSchemaSelect.appendChild(userOptgroup);
                        }
                        
                        // 添加系统模式
                        const systemSchemas = data.schemas.filter(schema => 
                            schema.startsWith('pg_') || 
                            schema === 'information_schema'
                        );
                        
                        if (systemSchemas.length > 0) {
                            // 添加系统模式分隔符
                            const systemOptgroup = document.createElement('optgroup');
                            systemOptgroup.label = '系统模式';
                            
                            systemSchemas.forEach(schema => {
                                const option = document.createElement('option');
                                option.value = schema;
                                option.textContent = schema;
                                systemOptgroup.appendChild(option);
                            });
                            
                            targetSchemaSelect.appendChild(systemOptgroup);
                        }
                    }
                    
                    targetSchemaSelect.disabled = false;
                    
                    // 显示数据加载提示
                    if (data.has_more) {
                        const optionElement = document.createElement('option');
                        optionElement.disabled = true;
                        optionElement.textContent = `加载了 ${data.count}/${data.total} 条记录`;
                        targetSchemaSelect.appendChild(optionElement);
                    }
                } else {
                    throw new Error(data.message || '获取Schema列表失败');
                }
            } catch (error) {
                targetSchemaSelect.innerHTML = '<option value="">加载失败，请重试</option>';
                targetSchemaSelect.disabled = false;
                alert('获取目标Schema失败：' + error.message);
            } finally {
                // 隐藏加载指示器
                hideLoading(targetSchemaLoading);
                // 重新启用按钮
                getTargetSchemaBtn.disabled = false;
            }
        }
        
        // 当PostgreSQL连接选择变化时，自动获取数据库列表
        postgresConnectionSelect.addEventListener('change', function() {
            // 清空PostgreSQL数据库选择
            postgresDatabaseSelect.innerHTML = '<option value="">请选择数据库</option>';
            
            // 清空目标Schema选择
            targetSchemaSelect.innerHTML = '<option value="">请先选择数据库</option>';
            
            // 如果选择了连接，自动获取数据库列表
            if (this.value) {
                getPostgresDatabases();
            }
        });
        
        // 当PostgreSQL数据库选择变化时，自动获取Schema列表
        postgresDatabaseSelect.addEventListener('change', function() {
            // 清空目标Schema选择
            targetSchemaSelect.innerHTML = '<option value="">请选择Schema</option>';
            
            // 如果选择了数据库，自动获取Schema列表
            if (this.value) {
                getTargetSchema();
            }
        });
        
        // 获取PostgreSQL数据库列表
        async function getPostgresDatabases() {
            if (!postgresConnectionSelect.value) {
                alert('请先选择PolarDB-PG连接');
                return;
            }
            
            // 显示数据库选择状态
            postgresDatabaseSelect.innerHTML = '<option value="">加载中...</option>';
            postgresDatabaseSelect.disabled = true;
            
            try {
                const requestData = {
                    connection_id: postgresConnectionSelect.value
                };
                
                const data = await fetchData('{% url "migration_app:get_postgres_databases" %}', requestData);
                
                if (data.status === 'success') {
                    postgresDatabaseSelect.innerHTML = '<option value="">请选择数据库</option>';
                    
                    // 按字母顺序排序
                    if (data.databases && data.databases.length > 0) {
                        data.databases.forEach(db => {
                            postgresDatabaseSelect.innerHTML += `<option value="${db}">${db}</option>`;
                        });
                    }
                    
                    postgresDatabaseSelect.disabled = false;
                } else {
                    throw new Error(data.message || '获取数据库列表失败');
                }
            } catch (error) {
                postgresDatabaseSelect.innerHTML = '<option value="">加载失败，请重试</option>';
                postgresDatabaseSelect.disabled = false;
                alert('获取PostgreSQL数据库失败：' + error.message);
            }
        }
        
        // 绑定加载更多按钮事件
        loadMoreBtn.addEventListener('click', function() {
            loadMoreObjects();
        });
        
        // 加载更多对象
        async function loadMoreObjects() {
            if (!oracleConnectionSelect.value) {
                alert('请先选择Oracle连接');
                return;
            }
            
            if (!sourceSchemaSelect.value) {
                alert('请先选择源Schema');
                return;
            }
            
            if (!taskTypeSelect.value) {
                alert('请先选择任务类型');
                return;
            }
            
            // 显示加载状态
            showLoading(sourceObjectLoading);
            loadMoreBtn.disabled = true;
            
            try {
                const searchTerm = sourceObjectSearch.value.trim();
                const requestData = {
                    connection_id: oracleConnectionSelect.value,
                    schema: sourceSchemaSelect.value,
                    object_type: taskTypeSelect.value,
                    search_term: searchTerm,
                    limit: 500,  // 每次加载500条
                    offset: currentOffset
                };
                
                console.log("加载更多对象，请求数据:", requestData);
                
                const data = await fetchData('{% url "migration_app:get_database_objects" %}', requestData);
                
                console.log("加载更多对象，响应数据:", data);
                
                if (data.status === 'success') {
                    // 移除加载提示选项
                    Array.from(sourceObjectList.children).forEach(item => {
                        if (item.classList.contains('text-muted') && item.textContent.includes('加载了')) {
                            item.remove();
                        }
                    });
                    
                    if (!data.objects || data.objects.length === 0) {
                        // 无更多数据，隐藏加载更多按钮
                        loadMoreContainer.classList.add('d-none');
                    } else {
                        // 添加新加载的对象
                        data.objects.forEach(obj => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item';
                            item.innerHTML = `
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="${obj}" id="obj-${obj}">
                                    <label class="form-check-label" for="obj-${obj}">${obj}</label>
                                </div>
                            `;
                            sourceObjectList.appendChild(item);
                        });
                        
                        // 更新分页状态
                        currentOffset += data.objects.length;
                        loadedObjectCount += data.objects.length;
                        totalObjectCount = data.total;
                        hasMoreObjects = data.has_more;
                        
                        loadStatus.textContent = `已加载 ${loadedObjectCount}/${totalObjectCount} 条记录`;
                        
                        // 如果没有更多数据，隐藏加载更多按钮
                        if (!hasMoreObjects) {
                            loadMoreBtn.classList.add('d-none');
                            loadStatus.textContent = `已加载全部 ${totalObjectCount} 条记录`;
                        } else {
                            loadMoreBtn.classList.remove('d-none');
                        }
                    }
                    
                    // 重新应用搜索过滤
                    if (searchTerm) {
                        filterObjects(searchTerm);
                    }
                } else {
                    throw new Error(data.message || '获取更多对象失败');
                }
            } catch (error) {
                console.error("加载更多对象异常:", error);
                alert('加载更多对象失败：' + error.message);
            } finally {
                // 隐藏加载指示器
                hideLoading(sourceObjectLoading);
                // 重新启用按钮
                loadMoreBtn.disabled = false;
            }
        }
        
        // 获取源对象函数
        async function getSourceObject() {
            if (!oracleConnectionSelect.value) {
                alert('请先选择Oracle连接');
                return;
            }
            
            if (!sourceSchemaSelect.value) {
                alert('请先选择源Schema');
                return;
            }
            
            if (!taskTypeSelect.value) {
                alert('请先选择任务类型');
                return;
            }
            
            if (taskTypeSelect.value === 'all_tables') {
                sourceObjectList.innerHTML = '<div class="list-group-item text-muted">对于"所有表"类型的任务，无需选择源对象</div>';
                loadMoreContainer.classList.add('d-none');
                return;
            }
            
            // 重置分页状态
            currentOffset = 0;
            hasMoreObjects = false;
            totalObjectCount = 0;
            loadedObjectCount = 0;
            
            // 显示加载状态
            showLoading(sourceObjectLoading);
            sourceObjectList.innerHTML = '<div class="list-group-item text-muted">加载中...</div>';
            loadMoreContainer.classList.add('d-none');
            
            try {
                const requestData = {
                    connection_id: oracleConnectionSelect.value,
                    schema: sourceSchemaSelect.value,
                    object_type: taskTypeSelect.value
                };
                
                // 禁用按钮避免重复点击
                getSourceObjectBtn.disabled = true;
                
                console.log("获取源对象，请求数据:", requestData);
                
                const data = await fetchData('{% url "migration_app:get_database_objects" %}', requestData);
                
                console.log("获取源对象，响应数据:", data);
                console.log(`获取到 ${data.objects ? data.objects.length : 0} 个对象，总数: ${data.total}`);
                
                if (data.status === 'success') {
                    sourceObjectList.innerHTML = '';
                    
                    if (!data.objects || data.objects.length === 0) {
                        sourceObjectList.innerHTML = '<div class="list-group-item text-muted">没有找到任何对象</div>';
                        loadMoreContainer.classList.add('d-none');
                        console.log("未找到任何对象");
                    } else {
                        console.log(`首个对象: ${data.objects[0]}`);
                        data.objects.forEach(obj => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item';
                            item.innerHTML = `
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="${obj}" id="obj-${obj}">
                                    <label class="form-check-label" for="obj-${obj}">${obj}</label>
                                </div>
                            `;
                            sourceObjectList.appendChild(item);
                        });
                        
                        // 更新分页状态
                        loadedObjectCount = data.objects.length;
                        totalObjectCount = data.total;
                        
                        // 显示数据加载完成状态
                        loadMoreContainer.classList.remove('d-none');
                        loadMoreBtn.classList.add('d-none');
                        loadStatus.textContent = `已加载全部 ${totalObjectCount} 条记录`;
                        
                        // 如果有搜索词，立即应用本地过滤
                        const searchTerm = sourceObjectSearch.value.trim();
                        if (searchTerm) {
                            filterObjects(searchTerm);
                        }
                    }
                    
                    // 更新已选择的对象显示
                    updateSelectedObjects();
                } else {
                    throw new Error(data.message || '获取对象列表失败');
                }
            } catch (error) {
                console.error("获取源对象异常:", error);
                sourceObjectList.innerHTML = '<div class="list-group-item text-muted">加载失败，请重试</div>';
                loadMoreContainer.classList.add('d-none');
                alert('获取源对象失败：' + error.message);
            } finally {
                // 隐藏加载指示器
                hideLoading(sourceObjectLoading);
                // 重新启用按钮
                getSourceObjectBtn.disabled = false;
            }
        }
        
        // 前端过滤对象
        function filterObjects(searchTerm) {
            const items = sourceObjectList.querySelectorAll('.list-group-item');
            const lowercaseSearchTerm = searchTerm.toLowerCase();
            
            items.forEach(item => {
                const label = item.querySelector('.form-check-label');
                if (label) {
                    const text = label.textContent.toLowerCase();
                    if (text.includes(lowercaseSearchTerm)) {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                }
            });
        }

        // 更新已选择对象的显示
        function updateSelectedObjects() {
            const selectedCheckboxes = sourceObjectList.querySelectorAll('.form-check-input:checked');
            selectedObjectsList.innerHTML = '';
            
            if (selectedCheckboxes.length === 0) {
                selectedObjectsList.innerHTML = '<span class="text-muted">未选择任何对象</span>';
                return;
            }
            
            selectedCheckboxes.forEach(checkbox => {
                const badge = document.createElement('span');
                badge.className = 'badge bg-primary me-1 mb-1';
                badge.innerHTML = `${checkbox.value} <i class="fas fa-check ms-1"></i>`;
                selectedObjectsList.appendChild(badge);
            });
        }
        
        // 监听源对象选择变化
        sourceObjectList.addEventListener('change', function(e) {
            if (e.target.matches('.form-check-input')) {
                updateSelectedObjects();
            }
        });

        // 搜索框输入时触发本地搜索
        sourceObjectSearch.addEventListener('input', function() {
            const searchTerm = this.value.trim();
            filterObjects(searchTerm);
        });

        // 搜索按钮点击事件
        sourceObjectSearchBtn.addEventListener('click', function() {
            const searchTerm = sourceObjectSearch.value.trim();
            filterObjects(searchTerm);
        });

        // 搜索框回车键触发搜索
        sourceObjectSearch.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const searchTerm = this.value.trim();
                filterObjects(searchTerm);
            }
        });
        
        // 绑定按钮事件
        getSourceSchemaBtn.addEventListener('click', function() {
            getSourceSchema();
        });
        
        getTargetSchemaBtn.addEventListener('click', function() {
            getTargetSchema();
        });
        
        getSourceObjectBtn.addEventListener('click', function() {
            getSourceObject();
        });
        
        // 表单提交事件
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // 基础验证
            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }
            
            // 附加验证
            if (!oracleConnectionSelect.value) {
                alert('请选择Oracle数据库连接');
                oracleConnectionSelect.focus();
                return;
            }
            
            if (!postgresConnectionSelect.value) {
                alert('请选择PolarDB-PG数据库连接');
                postgresConnectionSelect.focus();
                return;
            }
            
            if (!postgresDatabaseSelect.value) {
                alert('请选择PostgreSQL数据库');
                postgresDatabaseSelect.focus();
                return;
            }
            
            if (!sourceSchemaSelect.value) {
                alert('请选择源Schema');
                sourceSchemaSelect.focus();
                return;
            }
            
            if (!targetSchemaSelect.value) {
                alert('请选择目标Schema');
                targetSchemaSelect.focus();
                return;
            }
            
            if (taskTypeSelect.value !== 'all_tables') {
                const selectedOptions = Array.from(sourceObjectList.querySelectorAll('.form-check-input:checked'));
                if (selectedOptions.length === 0 || (selectedOptions.length === 1 && selectedOptions[0].value === '')) {
                    alert('请选择源对象');
                    sourceObjectList.focus();
                    return;
                }
            }
            
            const submitBtn = document.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span> 创建中...';
            submitBtn.disabled = true;
            
            // 获取表单数据
            const taskData = {
                name: document.getElementById('task-name').value,
                task_type: taskTypeSelect.value,
                oracle_connection: oracleConnectionSelect.value,
                postgres_connection: postgresConnectionSelect.value,
                postgres_database: postgresDatabaseSelect.value,
                source_schema: sourceSchemaSelect.value,
                target_schema: targetSchemaSelect.value,
                conflict_strategy: document.getElementById('conflict-strategy').value
            };
            
            // 添加源对象 (如果适用)
            if (taskTypeSelect.value !== 'all_tables') {
                // 获取所有选中的源对象，排除禁用选项和空值
                const selectedOptions = Array.from(sourceObjectList.querySelectorAll('.form-check-input:checked'))
                    .filter(option => option.value && !option.disabled);
                
                // 获取所有选中的对象值
                const selectedValues = selectedOptions.map(option => option.value);
                console.log('选中的对象值:', selectedValues);
                
                // 设置source_objects字段
                taskData.source_objects = selectedValues;
                console.log('设置后的source_objects:', taskData.source_objects);
                
                // 如果只选择了一个对象，同时设置source_object字段
                if (selectedValues.length === 1) {
                    taskData.source_object = selectedValues[0];
                }
            }
            
            try {
                console.log('提交的任务数据:', taskData);
                const data = await fetchData('{% url "migration_app:create_task" %}', taskData);
                
                if (data.status === 'success') {
                    window.location.href = `{% url "migration_app:task_detail" 0 %}`.replace('0', data.task_id);
                } else {
                    throw new Error(data.message || '创建任务失败');
                }
            } catch (error) {
                alert('创建任务失败：' + error.message);
                // 恢复按钮状态
                submitBtn.innerHTML = originalBtnText;
                submitBtn.disabled = false;
            }
        });
    });
</script>
{% endblock %}